<template>
    <div>
        <div class='weatherSearch'>
            <el-input
                v-model="city"
                placeholder="请输入您想要搜索的城市"
                @keyup.enter.native='searchWeather()'
            ></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    class='input_sub'
                    @click="searchWeather()"
                >搜索</el-button>
        </div>

        <ul class='weather_list'>
            <li
                v-for="(item,index) in weatherList"
                :key="index"
            >
                <div class="info_type">
                    <!-- 晴天 -->

                    <i
                        v-if="item.weather=='晴天'"
                        class="el-icon-sunny"
                    ></i>
                        <i
                            v-if="item.weather=='多云'"
                            class="el-icon-cloudy"
                        ></i>
                            <i
                                v-if="item.weather=='阴'"
                                class="el-icon-cloudy"
                            ></i>
                                <i
                                    v-if="item.weather=='小雨'"
                                    class="el-icon-light-rain"
                                ></i>
                                    <i
                                        v-if="item.weather=='大雨'"
                                        class="el-icon-heavy-rain"
                                    ></i>
                                        <i
                                            v-if="item.weather=='雷阵雨'"
                                            class="el-icon-lightning"
                                        ></i>

                                            <span class="iconfont">
                                                {{item.weather}}
                                            </span>
                </div>
                <div class="info_temp">
                    <span>气温:{{item.temperature}}</span>
                </div>
                <div class="info_date">
                    <span>日期:{{item.reporttime}}</span>
                </div>
                </li>
        </ul>

        <!-- 地图 -->
        <el-card
            v-loading="loading"
            element-loading-text="拼命加载中"
           class="chinaMap"
        >
            <div class="chinaMap">
                <div
                    ref="myEcharts"
                    id="myEcharts"
                    :style="{width: '100vw', height: '800px'}"
                >

            </div>
    </div>
    </el-card>

    </div>
</template>


<script>

import axios from 'axios'
import chinaJson from '../tool/chinaMap.json'
// import { async } from 'q';
import store from '../store/store'
import { setTimeout } from 'timers';
// import func from './vue-temp/vue-editor-bridge';


export default {
    data () {
        return {
            weatherList: {},
            city: '',
            Data: [],
            loading: true

        }
    },
    methods: {
        searchWeather () {
            //保存this
            var that = this
            // 调用天气预报接口
            axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=a3cb16024cef29c1b3188734b0e23c9d&city=' + this.city)
                .then(function (res) {
                    // console.log(res)
                    that.weatherList = res.data.lives
                    console.log(that.weatherList)

                })
                .catch(function (err) {
                    console.log(err)
                })
        },
        // 画一个地图
        chinaEcharts () {
            //1.注册一个地图
            this.$echarts.registerMap("china", chinaJson)
            //2.初始化echarts
            let myChart = this.$echarts.init(this.$refs.myEcharts)
            // 3.准备数据
            // eslint-disable-next-line no-unused-vars
            var data = [
                { name: "北京市", value: 177 },
                { name: "天津市", value: 42 },
                { name: "河北省", value: 102 },
                { name: "山西省", value: 81 },
                { name: "内蒙古自治区", value: 47 },
                { name: "辽宁省", value: 67 },
                { name: "吉林省", value: 82 },
                { name: "黑龙江省", value: 66 },
                { name: "上海市", value: 24 },
                { name: "江苏省", value: 92 },
                { name: "浙江省", value: 114 },
                { name: "安徽省", value: 109 },
                { name: "福建省", value: 116 },
                { name: "江西省", value: 91 },
                { name: "山东省", value: 119 },
                { name: "河南省", value: 137 },
                { name: "湖北省", value: 116 },
                { name: "湖南省", value: 114 },
                { name: "重庆市", value: 91 },
                { name: "四川省", value: 125 },
                { name: "贵州省", value: 62 },
                { name: "云南省", value: 83 },
                { name: "西藏自治区", value: 9 },
                { name: "陕西省", value: 80 },
                { name: "甘肃省", value: 56 },
                { name: "青海省", value: 10 },
                { name: "宁夏回族自治区", value: 18 },
                { name: "新疆维吾尔自治区", value: 67 },
                { name: "广东省", value: 123 },
                { name: "广西壮族自治区", value: 59 },
                { name: "海南省", value: 14 }
            ]

            //坐标 
            // var geoCoordMap = {
            //     上海: [121.472644, 31.231706],
            //     云南: [102.712251, 25.040609],
            //     内蒙古: [111.670801, 40.818311],
            //     北京: [116.405285, 39.904989],
            //     台湾: [121.509062, 25.044332],
            //     吉林: [125.3245, 43.886841],
            //     四川: [104.065735, 30.659462],
            //     天津: [117.190182, 39.125596],
            //     宁夏: [106.278179, 38.46637],
            //     安徽: [117.283042, 31.86119],
            //     山东: [117.000923, 36.675807],
            //     山西: [112.549248, 37.857014],
            //     广东: [113.280637, 23.125178],
            //     广西: [108.320004, 22.82402],
            //     新疆: [87.617733, 43.792818],
            //     江苏: [118.767413, 32.041544],
            //     江西: [115.892151, 28.676493],
            //     河北: [114.502461, 38.045474],
            //     河南: [113.665412, 34.757975],
            //     浙江: [120.153576, 30.287459],
            //     海南: [110.33119, 20.031971],
            //     湖北: [114.298572, 30.584355],
            //     湖南: [112.982279, 28.19409],
            //     澳门: [113.54909, 22.198951],
            //     甘肃: [103.823557, 36.058039],
            //     福建: [119.306239, 26.075302],
            //     西藏: [91.132212, 29.660361],
            //     贵州: [106.713478, 26.578343],
            //     辽宁: [123.429096, 41.796767],
            //     重庆: [106.504962, 29.533155],
            //     陕西: [108.948024, 34.263161],
            //     青海: [101.778916, 36.623178],
            //     香港: [114.173355, 22.320048],
            //     黑龙江: [126.642464, 45.756967],

            // }

            // console.log(data)
            //4.把数据变成[{{ name: "北京", value: [121.472644, 31.231706,177] },...}]格式
            // eslint-disable-next-line no-unused-vars
            // var convertData = function (data) {
            //     var res = [];
            //     //这里可以用map方法遍历
            //     for (var i = 0; i < data.length; i++) {
            //         var geoCoord = geoCoordMap[data[i].name];
            //         if (geoCoord) {
            //             res.push({
            //                 name: data[i].name,
            //                 value: geoCoord.concat(data[i].value)
            //             });
            //         }
            //     }
            //     // console.log(res)
            //     return res;
            // }
            //将天气的信息与data结合:
            // eslint-disable-next-line no-unused-vars

            // eslint-disable-next-line no-unused-vars
            // console.log(store.state.WeatherData)
            var Data = []

            const convertData = function (data) {

                //这里可以用map方法遍历

                for (var i = 0; i < data.length; i++) {

                    axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=a3cb16024cef29c1b3188734b0e23c9d&city=' + data[i].name)
                        // eslint-disable-next-line no-unused-vars
                        .then(function (res) {


                            store.state.WeatherData.push({
                                name: res.data.lives[0].city,
                                weather: res.data.lives[0].weather,
                                temperature: res.data.lives[0].temperature
                            });

                        })
                        .catch(function (err) {
                            console.log(err)
                        })


                }

                return store.state.WeatherData


            }
            console.log('store.state.WeatherData')
            console.log(store.state.WeatherData)


            setTimeout(() => {
                Data = store.state.WeatherData.map((item) => {
                    return {
                        name: item.name,
                        value: item.temperature,
                        weather: item.weather
                    }
                })
                console.log('Data')
                console.log(Data)
                this.loading=false
            }, 3000)


            // console.log(data)
            convertData(data)

            setTimeout(() => {
                //5.echarts配置
                let option = {
                    // 全图默认背景
                    backgroundColor: "transparent",
                    // 图表标题
                    title: {
                        text: "全国天气预报",
                        // 副标题
                        subtext: "中国地图",
                        sublink: "http://www.pm25.in",
                        left: "center",
                        textStyle: {
                            color: "black"
                        }
                    },

                    // 提示框
                    tooltip: {
                        // 触发类型，默认数据触发
                        trigger: "item",
                        formatter: function (params) {

                            return '省份 : ' + params.name + '<br>'
                                + '天气 : ' + params.data.weather + '<br>' + '气温 : ' + params.data.value
                        }
                    },
                    // 加上这个就可以实现多种颜色的功能
                    //标尺相关参数
                    visualMap: {
                        min: -20,
                        max: 40,
                        text: ['High', 'Low'],
                        calculable: false,
                        seriesIndex: [0],//这个对应的是series的数组下标
                        inRange: {
                            color: ["#0000ff", "#ffff00", "#ff8533", "#ff3300"]
                        }
                    },
                    //series就是地图上的数据（去掉就没有数据了）
                    series: [
                        {
                            type: "map",
                            map: 'china',
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        color: "black"
                                    }
                                }
                            },
                            roam: true,
                            animation: true,
                            data: Data
                            // store.state.WeatherData
                        },
                    ]
                };
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            }, 4000);





            myChart.on('click', function (params) {
                //param.name x轴值,param.data y轴值
                // console.log(params.name + ":" + params)
                console.log(params)
            });

        }
    },
    mounted () {
        this.chinaEcharts();
    },
}
</script>


<style scoped>
.weatherSearch {
  display: flex;

  justify-content: center;
}
.el-input {
  width: 500px;
}
.hotkey {
  display: flex;
  justify-content: center;
}
.weather_list {
  display: flex;
  justify-content: center;
  line-height: 50px;
}
.weather_list li {
  margin: 40px 30px;
}
.chinaMap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.chinaMap{
    margin: 20px 0 
}
</style> 